// 模拟数据文件，提供博客文章和项目的示例数据

// 博客文章数据
export const blogPosts = [
  {
    id: 1,
    title: "我的第一个Vue3项目：从零开始的学习之旅",
    slug: "first-vue3-project",
    date: "2023-10-15",
    author: "SyntaxSeed",
    tags: ["Vue", "JavaScript", "前端"],
    image: "https://picsum.photos/id/180/800/400",
    excerpt: "记录了我学习Vue3的过程，从安装环境到完成第一个应用，分享经验和踩过的坑。",
    readTime: 8,
    content: `
# 我的第一个Vue3项目：从零开始的学习之旅

## 前言

作为一名高中生开发者，我一直对前端开发充满热情。在尝试了React之后，我决定探索Vue3这个备受赞誉的框架。本文将记录我从零开始学习Vue3的全过程。

## 环境搭建

首先，我需要安装Node.js和npm。这是前端开发的基础环境：

\`\`\`bash
# 检查Node.js版本
node -v

# 安装Vue CLI
npm install -g @vue/cli
\`\`\`

## 创建项目

Vue CLI提供了一个交互式的项目脚手架，非常适合初学者：

\`\`\`bash
vue create my-first-vue-app
\`\`\`

在选项中，我选择了Vue3和Composition API，因为我想学习最新的技术。

## 理解Vue3的核心概念

### Composition API

Vue3最大的变化是引入了Composition API，它提供了更灵活的代码组织方式：

\`\`\`javascript
import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 响应式状态
    const count = ref(0)
    
    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 暴露给模板
    return {
      count
    }
  }
}
\`\`\`

### 响应式系统

Vue3的响应式系统使用Proxy代替了Vue2的Object.defineProperty，提供了更好的性能和更完整的响应式覆盖：

\`\`\`javascript
// 创建响应式对象
const state = reactive({
  count: 0,
  message: 'Hello'
})

// 创建响应式基本类型
const count = ref(0)
\`\`\`

## 构建我的第一个组件

学习了基础知识后，我开始构建一个简单的计数器组件：

\`\`\`vue
<template>
  <div class="counter">
    <h2>{{ title }}</h2>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    title: {
      type: String,
      default: '计数器'
    }
  },
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    function decrement() {
      count.value--
    }
    
    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

<style scoped>
.counter {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-width: 300px;
  margin: 0 auto;
}

button {
  margin: 0 5px;
  padding: 5px 10px;
}
</style>
\`\`\`

## 遇到的挑战

学习过程中，我遇到了一些挑战：

1. **理解响应式原理**：Vue3的响应式系统比Vue2更强大，但也更复杂。我花了一些时间理解ref和reactive的区别。

2. **Composition API的思维转变**：从Options API转向Composition API需要一定的思维转变，但一旦适应，代码组织会更加清晰。

3. **TypeScript集成**：尽管TypeScript不是必须的，但Vue3对它的支持非常好。我决定同时学习TypeScript，这增加了一些学习成本。

## 项目成果

经过两周的学习，我完成了一个简单的待办事项应用，包含以下功能：

- 添加、删除和标记完成待办事项
- 使用LocalStorage持久化数据
- 响应式设计，适配移动设备
- 暗黑模式切换

## 总结与反思

Vue3的学习曲线相对平缓，特别是对于已经有一些前端基础的开发者。Composition API提供的代码组织方式非常灵活，让我能够更好地复用逻辑。

下一步，我计划深入学习以下内容：

- Vuex 4状态管理
- Vue Router 4路由管理
- 更复杂的组件设计模式

希望这篇文章对其他正在学习Vue3的初学者有所帮助！
    `,
    related: [2, 5, 8]
  },
  {
    id: 2,
    title: "使用Tailwind CSS构建响应式界面",
    slug: "tailwind-css-responsive-design",
    date: "2023-11-02",
    author: "SyntaxSeed",
    tags: ["CSS", "Tailwind", "响应式设计"],
    image: "https://picsum.photos/id/119/800/400",
    excerpt: "探索Tailwind CSS的强大功能，如何利用它快速构建美观且响应式的网页界面。",
    readTime: 6,
    content: `
# 使用Tailwind CSS构建响应式界面

## 引言

Tailwind CSS是一个功能强大的CSS框架，它采用了实用优先的设计理念，让我们可以直接在HTML中应用样式类，而不需要编写自定义CSS。本文将分享我使用Tailwind CSS构建响应式界面的经验。

## 为什么选择Tailwind CSS？

在众多CSS框架中，我选择Tailwind CSS的原因有：

1. **无需离开HTML**：直接在HTML元素上应用类名，减少上下文切换
2. **高度可定制**：通过配置文件轻松定制设计系统
3. **响应式设计变得简单**：内置的响应式前缀使适配不同屏幕变得轻松
4. **不臃肿的最终CSS**：通过PurgeCSS只保留使用到的样式

## 安装与配置

首先，让我们在项目中安装Tailwind CSS：

\`\`\`bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
\`\`\`

然后，配置Tailwind CSS：

\`\`\`javascript
// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#2A9D8F',
        secondary: '#64FFDA',
        dark: '#0A192F',
        light: '#F0F7FF',
      },
      fontFamily: {
        sans: ['Open Sans', 'sans-serif'],
        heading: ['Montserrat', 'sans-serif'],
        code: ['Fira Code', 'monospace'],
      },
    },
  },
  plugins: [],
}
\`\`\`

## 构建响应式导航栏

下面是一个使用Tailwind CSS构建的响应式导航栏示例：

\`\`\`html
<nav class="bg-white dark:bg-dark shadow-md">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0 flex items-center">
        <img class="h-8 w-auto" src="/logo.svg" alt="Logo">
        <span class="ml-2 text-xl font-heading font-bold text-primary">SyntaxSeed</span>
      </div>
      
      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-4">
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary">首页</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary">博客</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary">项目</a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary">关于</a>
      </div>
      
      <!-- Mobile menu button -->
      <div class="-mr-2 flex items-center md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary">
          <span class="sr-only">打开主菜单</span>
          <!-- Icon when menu is closed -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
  
  <!-- Mobile menu, show/hide based on menu state -->
  <div class="md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary">首页</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary">博客</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary">项目</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary">关于</a>
    </div>
  </div>
</nav>
\`\`\`

## 响应式设计的关键

Tailwind CSS提供了一系列响应式前缀，使我们可以为不同的屏幕尺寸应用不同的样式：

- `sm:` - 小屏幕 (640px及以上)
- `md:` - 中等屏幕 (768px及以上)
- `lg:` - 大屏幕 (1024px及以上)
- `xl:` - 超大屏幕 (1280px及以上)
- `2xl:` - 超超大屏幕 (1536px及以上)

例如，`hidden md:flex`表示在中等屏幕以下隐藏元素，在中等屏幕及以上显示为flex布局。

## 构建响应式卡片网格

下面是一个响应式卡片网格的示例：

\`\`\`html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
  <!-- 卡片1 -->
  <div class="bg-white dark:bg-dark rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/500/300" alt="卡片图片">
    <div class="p-6">
      <h3 class="font-heading font-bold text-xl mb-2 text-gray-800 dark:text-white">项目标题</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">项目描述，简短介绍项目的主要功能和特点。</p>
      <div class="flex flex-wrap gap-2">
        <span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Vue</span>
        <span class="px-2 py-1 bg-primary/10 text-primary rounded text-xs">Tailwind</span>
      </div>
    </div>
  </div>
  
  <!-- 更多卡片... -->
</div>
\`\`\`

## 暗黑模式支持

Tailwind CSS内置了暗黑模式支持，只需在配置文件中启用：

\`\`\`javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或 'media'
  // ...
}
\`\`\`

然后，我们可以使用`dark:`前缀为暗黑模式定义样式：

\`\`\`html
<div class="bg-light dark:bg-dark text-gray-800 dark:text-white">
  <!-- 内容 -->
</div>
\`\`\`

## 自定义动画

Tailwind CSS也支持自定义动画：

\`\`\`javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
          '100%': { transform: 'translateY(0)' },
        }
      },
      animation: {
        wave: 'wave 3s ease-in-out infinite',
      }
    },
  },
}
\`\`\`

然后在HTML中应用：

\`\`\`html
<div class="animate-wave">
  <!-- 波浪动画内容 -->
</div>
\`\`\`

## 性能优化

Tailwind CSS生成的CSS文件可能很大，但我们可以通过PurgeCSS优化：

\`\`\`javascript
// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // ...
}
\`\`\`

这样，在生产构建时，只有使用到的类才会被包含在最终的CSS文件中。

## 总结

Tailwind CSS是一个强大的工具，它让我能够快速构建响应式、美观且性能优良的界面。虽然刚开始可能需要适应它的工作方式，但一旦熟悉，开发效率会大大提高。

下一步，我计划探索Tailwind CSS与Vue3组件的结合使用，以及如何构建更复杂的UI组件。
    `,
    related: [1, 3, 7]
  },
  {
    id: 3,
    title: "使用Framer Motion为Vue应用添加流畅动画",
    slug: "framer-motion-vue-animations",
    date: "2023-11-20",
    author: "SyntaxSeed",
    tags: ["动画", "Vue", "Framer Motion"],
    image: "https://picsum.photos/id/160/800/400",
    excerpt: "探索如何使用Framer Motion库为Vue应用添加专业级别的动画效果，提升用户体验。",
    readTime: 7,
    content: "详细内容将在这里展示...",
    related: [1, 2, 4]
  },
  {
    id: 4,
    title: "构建个人技术博客：从设计到部署",
    slug: "building-tech-blog",
    date: "2023-12-05",
    author: "SyntaxSeed",
    tags: ["博客", "Vue", "设计", "部署"],
    image: "https://picsum.photos/id/42/800/400",
    excerpt: "记录我构建个人技术博客的全过程，包括设计决策、技术选型、开发过程和最终部署。",
    readTime: 10,
    content: "详细内容将在这里展示...",
    related: [1, 2, 5]
  },
  {
    id: 5,
    title: "JavaScript异步编程：从回调到Async/Await",
    slug: "javascript-async-programming",
    date: "2023-12-18",
    author: "SyntaxSeed",
    tags: ["JavaScript", "异步编程", "教程"],
    image: "https://picsum.photos/id/3/800/400",
    excerpt: "深入理解JavaScript中的异步编程模式，从最早的回调函数到现代的Async/Await语法。",
    readTime: 9,
    content: "详细内容将在这里展示...",
    related: [1, 6, 8]
  },
  {
    id: 6,
    title: "CSS Grid布局：创建复杂网格系统的简单方法",
    slug: "css-grid-layout",
    date: "2024-01-10",
    author: "SyntaxSeed",
    tags: ["CSS", "布局", "教程"],
    image: "https://picsum.photos/id/96/800/400",
    excerpt: "探索CSS Grid布局系统，学习如何创建复杂且响应式的网页布局，无需依赖外部框架。",
    readTime: 6,
    content: "详细内容将在这里展示...",
    related: [2, 3, 7]
  },
  {
    id: 7,
    title: "Web性能优化：加载速度提升300%的技巧",
    slug: "web-performance-optimization",
    date: "2024-01-25",
    author: "SyntaxSeed",
    tags: ["性能优化", "前端", "教程"],
    image: "https://picsum.photos/id/60/800/400",
    excerpt: "分享我在优化网站性能过程中学到的关键技巧，这些方法帮助我将网站加载速度提升了300%。",
    readTime: 8,
    content: "详细内容将在这里展示...",
    related: [4, 5, 8]
  },
  {
    id: 8,
    title: "从零开始学习TypeScript：类型系统详解",
    slug: "typescript-type-system",
    date: "2024-02-08",
    author: "SyntaxSeed",
    tags: ["TypeScript", "JavaScript", "教程"],
    image: "https://picsum.photos/id/237/800/400",
    excerpt: "TypeScript入门指南，详细解释类型系统的核心概念，帮助JavaScript开发者快速掌握TypeScript。",
    readTime: 11,
    content: "详细内容将在这里展示...",
    related: [1, 5, 7]
  }
];

// 项目数据
export const projects = [
  {
    id: 1,
    title: "个人技术博客",
    slug: "tech-blog",
    category: "Web开发",
    tags: ["Vue3", "Tailwind CSS", "Vite"],
    image: "https://picsum.photos/id/0/800/600",
    description: "一个使用Vue3和Tailwind CSS构建的个人技术博客，展示我的学习历程和技术文章。",
    features: [
      "响应式设计，适配各种设备",
      "暗黑模式支持",
      "文章分类和标签系统",
      "代码高亮显示",
      "阅读进度指示器"
    ],
    demoUrl: "https://blog.example.com",
    sourceUrl: "https://github.com/example/tech-blog",
    completionDate: "2023-12-15"
  },
  {
    id: 2,
    title: "天气预报应用",
    slug: "weather-app",
    category: "Web应用",
    tags: ["Vue3", "API集成", "动画"],
    image: "https://picsum.photos/id/1011/800/600",
    description: "一个简洁美观的天气预报应用，使用OpenWeatherMap API获取实时天气数据。",
    features: [
      "地理位置自动检测",
      "5天天气预报",
      "温度、湿度、风速等详细信息",
      "动态背景根据天气状况变化",
      "城市搜索功能"
    ],
    demoUrl: "https://weather.example.com",
    sourceUrl: "https://github.com/example/weather-app",
    completionDate: "2023-10-20"
  },
  {
    id: 3,
    title: "任务管理工具",
    slug: "task-manager",
    category: "Web应用",
    tags: ["Vue3", "Vuex", "LocalStorage"],
    image: "https://picsum.photos/id/48/800/600",
    description: "一个功能完善的任务管理工具，帮助用户组织和跟踪日常任务。",
    features: [
      "任务创建、编辑和删除",
      "任务分类和标签",
      "截止日期和提醒",
      "拖放排序",
      "数据本地存储"
    ],
    demoUrl: "https://tasks.example.com",
    sourceUrl: "https://github.com/example/task-manager",
    completionDate: "2023-09-05"
  },
  {
    id: 4,
    title: "音乐播放器",
    slug: "music-player",
    category: "Web应用",
    tags: ["JavaScript", "Web Audio API", "CSS动画"],
    image: "https://picsum.photos/id/1082/800/600",
    description: "一个简约风格的网页音乐播放器，支持播放列表和音频可视化。",
    features: [
      "播放、暂停、跳过控制",
      "播放列表管理",
      "音频波形可视化",
      "音量和进度控制",
      "响应式设计"
    ],
    demoUrl: "https://music.example.com",
    sourceUrl: "https://github.com/example/music-player",
    completionDate: "2023-08-12"
  },
  {
    id: 5,
    title: "编程学习笔记应用",
    slug: "code-notes",
    category: "Web应用",
    tags: ["Vue3", "Markdown", "IndexedDB"],
    image: "https://picsum.photos/id/2/800/600",
    description: "一个为程序员设计的笔记应用，支持Markdown和代码高亮，帮助记录学习过程。",
    features: [
      "Markdown编辑器",
      "代码块语法高亮",
      "笔记分类和标签",
      "全文搜索",
      "离线存储"
    ],
    demoUrl: "https://notes.example.com",
    sourceUrl: "https://github.com/example/code-notes",
    completionDate: "2024-01-30"
  },
  {
    id: 6,
    title: "个人作品集网站",
    slug: "portfolio",
    category: "Web开发",
    tags: ["HTML", "CSS", "JavaScript"],
    image: "https://picsum.photos/id/180/800/600",
    description: "我的第一个个人作品集网站，展示我的项目和技能。这是我学习HTML和CSS的起点。",
    features: [
      "响应式设计",
      "项目展示区",
      "技能进度条",
      "联系表单",
      "简约设计"
    ],
    demoUrl: "https://portfolio.example.com",
    sourceUrl: "https://github.com/example/portfolio",
    completionDate: "2022-12-10"
  }
];

// 时间轴数据
export const timelineEvents = [
  {
    id: 1,
    title: "开始编程之旅",
    date: "2019-09",
    description: "学习了HTML和CSS基础，创建了第一个静态网页。这是我踏入编程世界的第一步。",
    technologies: ["HTML", "CSS"],
    skillsGained: ["网页结构", "基础样式"],
    image: "https://picsum.photos/id/0/300/200",
    link: ""
  },
  {
    id: 2,
    title: "JavaScript入门",
    date: "2020-03",
    description: "开始学习JavaScript，理解了编程逻辑和基本概念，能够为网页添加简单的交互功能。",
    technologies: ["JavaScript"],
    skillsGained: ["变量和函数", "DOM操作", "事件处理"],
    image: "https://picsum.photos/id/1/300/200",
    link: ""
  },
  {
    id: 3,
    title: "第一个响应式网站",
    date: "2020-08",
    description: "学习了响应式设计原则，使用媒体查询创建了适配不同设备的个人作品集网站。",
    technologies: ["HTML", "CSS", "JavaScript", "响应式设计"],
    skillsGained: ["媒体查询", "Flexbox布局", "移动优先设计"],
    image: "https://picsum.photos/id/180/300/200",
    link: "https://github.com/example/portfolio"
  },
  {
    id: 4,
    title: "React框架学习",
    date: "2021-04",
    description: "开始学习React框架，理解了组件化开发和状态管理的概念，构建了一个简单的待办事项应用。",
    technologies: ["React", "JSX", "CSS-in-JS"],
    skillsGained: ["组件开发", "状态管理", "生命周期"],
    image: "https://picsum.photos/id/160/300/200",
    link: "https://github.com/example/react-todo"
  },
  {
    id: 5,
    title: "后端开发初探",
    date: "2022-01",
    description: "学习了Node.js和Express，开始理解前后端交互的原理，构建了简单的API和服务器。",
    technologies: ["Node.js", "Express", "MongoDB"],
    skillsGained: ["API设计", "数据库操作", "服务器部署"],
    image: "https://picsum.photos/id/48/300/200",
    link: "https://github.com/example/express-api"
  },
  {
    id: 6,
    title: "Vue3学习",
    date: "2022-09",
    description: "转向学习Vue3框架，掌握了Composition API和响应式系统，开发了个人博客项目。",
    technologies: ["Vue3", "Vite", "Composition API"],
    skillsGained: ["Vue组件", "响应式编程", "路由管理"],
    image: "https://picsum.photos/id/119/300/200",
    link: "https://github.com/example/vue-blog"
  },
  {
    id: 7,
    title: "全栈项目：音乐应用",
    date: "2023-05",
    description: "整合前后端知识，开发了一个完整的音乐播放应用，包含用户认证、数据存储和音频处理。",
    technologies: ["Vue3", "Node.js", "Express", "MongoDB", "Web Audio API"],
    skillsGained: ["全栈开发", "用户认证", "音频处理", "状态管理"],
    image: "https://picsum.photos/id/1082/300/200",
    link: "https://github.com/example/music-app"
  },
  {
    id: 8,
    title: "现在：技术博客",
    date: "2023-12",
    description: "使用Vue3、Tailwind CSS和各种现代工具，开发了这个技术博客，记录我的学习历程和技术分享。",
    technologies: ["Vue3", "Tailwind CSS", "Vite", "Markdown"],
    skillsGained: ["现代前端工具链", "性能优化", "内容管理"],
    image: "https://picsum.photos/id/42/300/200",
    link: "https://github.com/example/tech-blog"
  }
];

// 技术栈数据
export const techStack = [
  {
    id: 1,
    name: "HTML5",
    category: "前端",
    proficiency: 90,
    description: "熟练掌握HTML5语义化标签、表单、多媒体元素等，注重可访问性和SEO优化。",
    projects: [1, 3, 6],
    icon: "html5"
  },
  {
    id: 2,
    name: "CSS3",
    category: "前端",
    proficiency: 85,
    description: "精通CSS3动画、Flexbox、Grid布局、响应式设计，能够实现复杂的UI效果。",
    projects: [1, 3, 6],
    icon: "css3"
  },
  {
    id: 3,
    name: "JavaScript",
    category: "前端",
    proficiency: 80,
    description: "掌握ES6+特性、异步编程、DOM操作、事件处理等，能够编写高质量的JavaScript代码。",
    projects: [1, 2, 3, 4],
    icon: "javascript"
  },
  {
    id: 4,
    name: "Vue.js",
    category: "前端框架",
    proficiency: 85,
    description: "熟练使用Vue3 Composition API、Vue Router、Vuex/Pinia，开发过多个Vue项目。",
    projects: [1, 2, 3, 5],
    icon: "vuejs"
  },
  {
    id: 5,
    name: "React",
    category: "前端框架",
    proficiency: 70,
    description: "了解React核心概念、Hooks、Context API，有一定的React项目经验。",
    projects: [],
    icon: "react"
  },
  {
    id: 6,
    name: "Tailwind CSS",
    category: "CSS框架",
    proficiency: 90,
    description: "精通Tailwind CSS的使用，能够快速构建响应式、美观的用户界面。",
    projects: [1, 5],
    icon: "tailwind"
  },
  {
    id: 7,
    name: "Node.js",
    category: "后端",
    proficiency: 65,
    description: "了解Node.js运行时，能够使用Express框架构建RESTful API和Web服务器。",
    projects: [3, 5],
    icon: "nodejs"
  },
  {
    id: 8,
    name: "MongoDB",
    category: "数据库",
    proficiency: 60,
    description: "了解MongoDB基本操作，能够进行数据的CRUD操作和简单的聚合查询。",
    projects: [5],
    icon: "mongodb"
  },
  {
    id: 9,
    name: "Git",
    category: "工具",
    proficiency: 75,
    description: "熟练使用Git进行版本控制，了解分支管理、合并冲突解决等操作。",
    projects: [1, 2, 3, 4, 5, 6],
    icon: "git"
  },
  {
    id: 10,
    name: "Vite",
    category: "工具",
    proficiency: 80,
    description: "熟练使用Vite构建工具，了解其配置和优化方法。",
    projects: [1, 2, 5],
    icon: "vite"
  },
  {
    id: 11,
    name: "TypeScript",
    category: "语言",
    proficiency: 60,
    description: "了解TypeScript基本类型系统，能够在项目中应用类型注解提高代码质量。",
    projects: [],
    icon: "typescript"
  },
  {
    id: 12,
    name: "Webpack",
    category: "工具",
    proficiency: 65,
    description: "了解Webpack基本配置和优化方法，能够搭建基本的前端工程化环境。",
    projects: [3],
    icon: "webpack"
  }
];

// 学习计划数据
export const learningPlan = [
  {
    id: 1,
    title: "深入学习TypeScript",
    description: "系统学习TypeScript的高级特性，包括泛型、装饰器、高级类型等，提高代码的类型安全性。",
    resources: [
      { name: "TypeScript官方文档", url: "https://www.typescriptlang.org/docs/" },
      { name: "TypeScript Deep Dive", url: "https://basarat.gitbook.io/typescript/" }
    ],
    startDate: "2024-03-01",
    estimatedCompletionDate: "2024-04-30",
    progress: 15
  },
  {
    id: 2,
    title: "学习Next.js框架",
    description: "学习Next.js框架，掌握服务器端渲染(SSR)和静态站点生成(SSG)技术，提升网站性能和SEO。",
    resources: [
      { name: "Next.js官方文档", url: "https://nextjs.org/docs" },
      { name: "Next.js教程", url: "https://nextjs.org/learn" }
    ],
    startDate: "2024-05-01",
    estimatedCompletionDate: "2024-06-30",
    progress: 0
  },
  {
    id: 3,
    title: "学习GraphQL",
    description: "学习GraphQL查询语言和相关工具，理解如何设计和使用GraphQL API，优化前后端数据交互。",
    resources: [
      { name: "GraphQL官方文档", url: "https://graphql.org/learn/" },
      { name: "Apollo GraphQL教程", url: "https://www.apollographql.com/docs/tutorial/introduction/" }
    ],
    startDate: "2024-07-01",
    estimatedCompletionDate: "2024-08-31",
    progress: 0
  },
  {
    id: 4,
    title: "深入学习Web动画",
    description: "深入学习CSS动画、SVG动画、Canvas和WebGL，掌握创建复杂交互动画的技术。",
    resources: [
      { name: "MDN Web动画文档", url: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API" },
      { name: "GreenSock动画平台", url: "https://greensock.com/docs/" }
    ],
    startDate: "2024-09-01",
    estimatedCompletionDate: "2024-10-31",
    progress: 0
  },
  {
    id: 5,
    title: "学习Docker和CI/CD",
    description: "学习Docker容器化技术和CI/CD流程，提升项目的部署和维护效率。",
    resources: [
      { name: "Docker官方文档", url: "https://docs.docker.com/get-started/" },
      { name: "GitHub Actions文档", url: "https://docs.github.com/en/actions" }
    ],
    startDate: "2024-11-01",
    estimatedCompletionDate: "2024-12-31",
    progress: 0
  }
];